<template>
	<el-dialog v-model="dialogVisible" :title="title" width="90%" draggable>
		<new-table v-bind="state" @handleSort="onHandleSort"></new-table>
	</el-dialog>
</template>


<script lang="ts" setup name="SourceModal">
import { ref, reactive } from 'vue';
import NewTable from 'src/components/NewTable/index.vue'
import type { TableColumnCtx } from 'element-plus'
import { getClueSourceRank, getClueCourseRank, getDepartmentSourceRank, getDepartmentCourseRank } from '../api';
import { ModalType, PageType } from '../const'
import utils from "src/utils";

const searchForm = ref<SearchFormType>({})
const today = utils.getTodayDate()
interface SummaryMethodProps<T = any> {
	columns: TableColumnCtx<T>[]
	data: T[]
}
const title = ref<string>('来源详情')
const dialogVisible = ref(false);
const currentModalData = ref<any>({})
/**
 * 	"clueNum": "线索量",
	"courseName": "类目名称",
	"departmentName": "部门名称",
	"departmentid": "部门id",
	"effective": "有效订单量",
	"sourceName": "来源名称",
	"uneffective": "冲红量",
	"userName": "推广员名称",
	"userid": "推广员id"
 */
const originTableHeader: TableHeader[] = [
	{ label: "来源", prop: "sourceName" },
	{ label: "分类", prop: "courseName" },
	{ label: "录单数量", prop: "clueNum", sortable: true },
	{ label: "冲单数量", prop: "uneffective", sortable: true },
	{ label: "有效名单数量", prop: "effective", sortable: true }
]
const openDialog = (row: any, type: keyof typeof ModalType, pageType: keyof typeof PageType) => {
	currentModalData.value.row = { ...row }
	currentModalData.value.type = type
	currentModalData.value.pageType = pageType
	getTableList()
	dialogVisible.value = true;
};
const getTableList = () => {
	const { row, type, pageType } = currentModalData.value
	let spliceIndex = 0, requestFunc = null
	if (type === ModalType.SOURCE) {
		title.value = '来源详情'
		spliceIndex = 1
		requestFunc = pageType === PageType.DEPARTMENT ? getDepartmentSourceRank : getClueSourceRank
	} else {
		title.value = '课程分类详情'
		spliceIndex = 0
		requestFunc = pageType === PageType.DEPARTMENT ? getDepartmentCourseRank : getClueCourseRank
	}
	state.tableHeader = originTableHeader.slice()
	state.tableHeader.splice(spliceIndex, 1)
	requestFunc({
		order: 'desc',
		columnName: 'addtime',
		btime: row.btime || today + ' 00:00:00',
		etime: row.etime || today + ' 00:00:00',
		departmentid: row.departmentid || 0,
		userid: row.userid || 0,
		...searchForm.value
	}).then((res) => {
		if (`${res.code}` === '0') {
			state.tableData = [...res.data]
		} else {
			state.tableData = []
		}
	});

}
const state = reactive({
	tableHeader: <TableHeader[]>[],
	//表项数据
	tableData: <Api_DataStatistics.ClueItemProps[]>[],
	isIndex: false,
	paginationFlag: false,
	// 是否展示总计
	showSummary: true,
	summaryMethod: (param: SummaryMethodProps) => {
		const { columns, data } = param
		const sums: string[] = []
		columns.forEach((column, index) => {
			if (index === 0) {
				sums[index] = '总计'
				return
			}
			const values = data.map((item) => Number(item[column.property]))
			if (!values.every((value) => Number.isNaN(value))) {
				sums[index] = `${values.reduce((prev, curr) => {
					const value = Number(curr)
					if (!Number.isNaN(value)) {
						return prev + curr
					} else {
						return prev
					}
				}, 0)}`
			} else {
				sums[index] = 'N/A'
			}
		})
		return sums
	}
});
const onHandleSort = utils.commonSortChage(searchForm, getTableList)

defineExpose({ openDialog });
</script>